<template>
    <view class="upload" :class="size">
        <view class="upload-wrapper">
            <div class="upload-preview" v-for="(item, index) in fileList" :key="index">
                <image v-if="type == 2" src="/static/img/play.png" class="play-icon" @click.stop="playVideo(item)" />
                <image @click.stop="previewImage(fileList, index)" :src="item.blob" class="upload-preview__img" mode="aspectFill" lazy-load />
                <icon class="delete-icon" type="clear" color="#999" size="28rpx" @click.stop="deleteFile(index)"></icon>
                <slot :item="item" />
            </div>
            <view class="upload-box">
                <view class="upload-btn" :style="{ background: background }" :class="{ 'upload-border': border }" @click="changAction" v-if="limit > fileList.length">
                    <text class="upload-icon" :class="icon"></text>
                    <view class="upload-text" :style="{ color: textColor }" v-if="text">{{ text }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// import { uploadOss } from "@/utils/oss";
import { mapGetters } from "vuex"
export default {
    data() {
        return {
            radio: true,
            fileList: []
        }
    },
    props: {
        type: {
            type: [String, Number],
            default: 1 //0图片和视频 1图片 2视频
        },
        limit: {
            type: [String, Number],
            default: 9
        },
        size: {
            type: String,
            default: ""
        },
        icon: {
            type: String,
            default: "bs-icon-zengjia"
        },
        background: {
            type: String,
            default: "#f7f8fa"
        },
        color: {
            type: String,
            default: "#dcdee0"
        },
        border: {
            type: Boolean,
            default: false
        },
        text: {
            type: String,
            default: ""
        },
        showlimit: {
            type: Boolean,
            default: false
        },
        textColor: {
            type: String,
            default: "#999"
        },
        time: {
            type: Number,
            default: 60
        },
        maxSize: {
            type: Number,
            default: 200
        }
    },
    computed: {
        ...mapGetters(["configData"])
    },
    mounted() {
        if (this.type == 0 || this.type == 1) {
            this.radio = true
        } else {
            this.radio = false
        }
    },
    methods: {
        changAction() {
            this.chooseFile(this.radio ? 1 : 0)
        },
        previewImage(fileList, index) {
            if (this.type === 2) return
            uni.previewImage({
                current: index,
                urls: fileList.map(item => item.blob),
                indicator: "number"
            })
        },
        playVideo(item) {
            this.$navPage("/pages/video/play?url=" + this.$getFileUrl(item.url))
        },
        async chooseFile(id) {
            switch (id) {
                case 0:
                    let res = await new Promise(resolve => {
                        uni.chooseVideo({
                            compressed: true,
                            maxDuration: 60,
                            success: async res => {
                                resolve([res])
                            }
                        })
                    })
                    const maxSize = res.every(item => item.size / 1024 / 1024 < this.maxSize)
                    if (!maxSize) {
                        this.$showToast(`上传视频大小不能超过${this.maxSize}M!`)
                        return
                    }
                    // if (res.some(item => item.duration > this.time)) {
                    //     this.$showToast(`请上传${this.time}s以内视频`)
                    //     return
                    // }
                    this.$showLoading("正在上传...")
                    let result = await Promise.all(res.map(item => uploadOss(item, "video")))
                    this.$showSuccess("上传成功")
                    let list = result.map(item => ({ blob: this.configData.static_url + item.cover_path, url: item.file_path }))
                    if (this.limit === 1) {
                        this.fileList = list
                    } else {
                        this.fileList = this.fileList.concat(list)
                    }
                    this.$emit(
                        "getVideoUrl",
                        this.fileList.map(item => item.url)
                    )
                    break
                case 1:
                    uni.chooseImage({
                        count: Number(this.limit), //默认9
                        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                        success: async res => {
                            if (res.tempFilePaths.length + this.fileList.length > this.limit && this.limit > 1) {
                                this.$showToast(`最多上传${this.limit}张图片`)
                                return
                            }
                            this.$showLoading("正在上传...")
                            let result = await Promise.all(res.tempFiles.map(item => uploadOss(item)))

                            uni.hideLoading()
                            this.$showSuccess("上传成功")
                            let list = res.tempFilePaths.map((item, index) => ({ blob: item, url: result[index].file_path }))
                            if (this.limit === 1) {
                                this.fileList = list
                            } else {
                                this.fileList = this.fileList.concat(list)
                            }
                            this.$emit(
                                "getUploadImgUrl",
                                this.fileList.map(item => item.url)
                            )
                        }
                    })
                    break
            }
        },
        deleteFile(index) {
            this.fileList.splice(index, 1)
            this.$emit(
                "getUploadImgUrl",
                this.fileList.map(item => item.url)
            )
        },
        showFile(list) {
            this.fileList = list.map(item => ({ blob: this.$getFileUrl(item), url: item }))
        }
    }
}
</script>

<style lang="scss" scoped>
.upload {
    &-wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    &-preview {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        margin: 0 16rpx 16rpx 0;
        &__img {
            width: 100%;
            height: 100%;
        }
    }
    &-box {
        margin: 0 0 16rpx 0;
    }
    &-btn {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 160rpx;
        height: 160rpx;
        box-sizing: border-box;
    }
    .upload-text {
        font-size: 24rpx;
        margin-top: 16rpx;
    }
    .upload-border {
        border: 1px solid #dadada;
    }
    &-icon {
        font-size: 48rpx;
        color: #666;
    }
    .delete-icon {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 28rpx;
        background: rgba($color: #000000, $alpha: 0.1);
        padding: 4rpx;
        line-height: 14rpx;
        color: $gray-2;
    }
    .play-icon {
        position: absolute;
        z-index: 99;
        top: 50%;
        left: 50%;
        width: 48rpx;
        height: 48rpx;
        transform: translate(-50%, -50%);
    }
    .show-limit {
        position: absolute;
        right: 4rpx;
        bottom: 4rpx;
        font-size: 24rpx;
        color: #999;
    }
}
.large.upload {
    .upload-preview,
    .upload-btn {
        width: 300rpx;
        height: 200rpx;
    }
    .upload-icon {
        font-size: 60rpx;
    }
    .upload-box {
        margin-right: 0;
    }
}
</style>
